<template>
	<view class="">
		<coupons :coupons="coupons"></coupons>
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				useIng: '待使用',
				used: '已使用',
				useOut: '已过期'
			};
		},
		computed: {
			// 获取vuex 数据
			...mapState({
				coupons: state => state.user.couponsDetail,   // 获取卡卷详情
			}),
		},
		mounted() {
			// 修改卡卷状态
			if(this.coupons.status == 1) {
				this.coupons.status = this.useIng
			} 
			if(this.coupons.status == 2) {
				this.coupons.status = this.used
			}
			if(this.coupons.status == 3) {
				this.coupons.status = this.useOut
			}
		},
	};
</script>

<style scoped lang="scss">
	@import './index.scss';
	.showUse {
		background: linear-gradient(269deg,#dddddd 5%, #bfbfbf 95%)!important;
	}
</style>
